<!DOCTYPE html>
<html lang="en" ng-app="loklakWordCloud">
  <head>
    <meta charset="utf-8">
    <meta name="robots" content="index,follow">
    <meta http-equiv="cache-control" content="public">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="Content-Language" content="en, english" />
    <link rel="icon" type="image/png" href="http://loklak.org/artwork/favicon.png">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/angular.min.js"></script>
    <script src="/js/angular-route.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jqcloud.min.css">
    <script type="text/javascript" src="js/jqcloud.min.js"></script>
    <script type="text/javascript" src="js/html2canvas.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-default navbar-custom navbar-custom">
      <div class="container-fluid navbar-container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand brand-container">
            <a href="http://apps.loklak.org" class="loklak-brand"> <span class="loklak-header">
              loklak</span> <span>WordCloud</span></a>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="http://loklak.org/about">About</a></li>
            <li><a href="http://loklak.org/">Search</a></li>
            <li><a href="http://blog.loklak.net/">Blog</a></li>
            <li><a href="http://dev.loklak.org/">Developers</a></li>
            <li><a href="https://api.loklak.org/">API</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="main app" ng-controller="app">
      <div id="preview" class="modal fade" role="dialog">
        <div class="modal-dialog preview-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Preview image</h4>
            </div>
            <div class="modal-body canvas-body">
              <div class="wordcloud-canvas" id="wordcloud-canvas">
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default modal-button" data-dismiss="modal">Close</button>
              <a type="button" class="btn btn-default btn-sm save-btn" href="http://www.google.com">
                <span class="glyphicon glyphicon-save"></span> Save
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="snackbar">{{error}}</div>
      <div class="container">
        <div class="row">
          <div class="wordcloud">
          </div>
        </div>
        <div class="row">
          <div class="input-control card">
            <div class="col-md-6">
              <div class="tweet-input">
                <input type="text" class="form-control tweet-input-field" placeholder="Enter query word"
                  ng-model="tweet" ng-keyup="$event.keyCode == 13 ? search() : null">
                <button type="button" class="btn tweet-search" ng-click="search()">
                  <span class="glyphicon glyphicon-search search-icon"></span>
                </button>
              </div>
              <div class="date-filters">
                <input class="start-date form-control date" ng-model="startDate" ng-init="" placeholder="From">
                <input class="end-date form-control date" ng-model="endDate" ng-init="" placeholder="To">
              </div>
              <div ng-if="isLoading" class="loader">
              </div>
            </div>
            <div class="col-md-6 tweet-filters">
              <strong>Filters</strong>
              <div class="dropdown type" ng-if="download">
                <div class="dropdown-toggle select-type" data-toggle="dropdown">
                  {{imageType}}
                <span class="caret"></span></div>
                <ul class="dropdown-menu">
                  <li ng-click="changeType('png', 'png')"><a href="">png</a></li>
                  <li ng-click="changeType('jpeg', 'jpg')"><a href="">jpeg</a></li>
                </ul>
              </div>
              <a class="export" ng-click="export()" ng-if="download">Export as image</a>
              <hr>
              <div class="filters">
                <label class="checkbox-inline"><input type="checkbox" value="" ng-model="hashtags">Hashtags</label>
                <label class="checkbox-inline"><input type="checkbox" value="" ng-model="mentions">Mentions</label>
                <label class="checkbox-inline"><input type="checkbox" value="" ng-model="tweetbody">Tweet body</label>
              </div>
              <div class="filter-all">
                <span class="select-all" ng-click="selectAll()"> Select all </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <footer>
    <script src="js/stopwords.js"></script>
    <script src="js/script.js"></script>
  </footer>
</html>
